<template>
	<view class="user">
		<view class="user-section" style="padding-top:30px;">
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="avatar"></image>
				</view>
				<view class="info-box">
					<text class="username">{{nickname}}</text>
				</view>
				<view class="bd_user" v-if="nones" @click="appLoginWx" data-a="user/gitee_login/index">登录</view>
				<view class="bd_user" v-else @click="logout()" data-a="user/gitee_login/index">退出</view>
			</view>
			<view class="tj-sction" v-if="!nones">
				<view class="tj-item" @click="goCollect()">
					<text class="num">{{publishArticleNum}}</text>
					<text class="num2">文章</text>
				</view>
				<view class="tj-item">
					<text class="num">{{pulishArticleLikeSum}}</text>
					<text class="num2">获赞</text>
				</view>
			</view>
		</view>
		<view v-if="!nones">
			<view class="min_height cu-bar" style="margin-top: 20px;">
				<view class="action sub-title">
					<text class="text-xl text-bold text-tree">芹菜助手</text>
					<text class="text-ABC text-tree">Celery Blog</text>
				</view>
			</view>
			<view class="user_jx">
				<navigator hover-class='none' url="../../pages_publish/publish/publish" class="nav-li bg_te">
					<view class="nav-title">文章发表</view>
					<view class="nav-name">生活如源泉</view>
					<text class='cuIcon-writefill'></text>
				</navigator>
				<navigator hover-class='none' url="../../pages_all/collect/collect?id=0" class="nav-li bg_fe">
					<view class="nav-title">个人赏析</view>
					<view class="nav-name">like collection</view>
					<text class='cuIcon-newshotfill'></text>
				</navigator>
			</view>
			<view class="cu-list menu  ">
				<view class="cu-item arrow">
					<navigator class="content" hover-class="none" url="#">
						<text class="cuIcon-evaluate  text-tree"></text>
						<text class="text-grey">我的资料</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill  text-tree"></text>
						<text class="text-grey">意见反馈</text>
					</button>
				</view>
				<view class="cu-item arrow" @click="clear()">
					<view class="content" url="/pages/about/test/list" hover-class="none">
						<text class="cuIcon-creativefill text-tree"></text>
						<text class="text-grey">清理缓存</text>
					</view>
				</view>
				<view class="cu-item arrow" @click="logout()">
					<!-- open-type="contact" -->
					<button class="cu-btn content">
						<text class="cuIcon-safe  text-tree"></text>
						<text class="text-grey">退出登录</text>
					</button>
				</view>
			</view>
		</view>
		<cu-footer></cu-footer>
	</view>
</template>

<script>
	import cuFooter from '../../components/footer/footer.vue';
	import APP from '../../App.vue';
	export default {
		components: {
			cuFooter
		},
		data() {
			return {
				avatar: '',
				nickname: '',
				nones: true,
				code: '',
				openid: '',
				publishArticleNum:0,
				pulishArticleLikeSum:0
			}
		},
		onLoad: function() {
			let _this = this;
			if (uni.getStorageSync('MyusrInfo')) {
				_this.avatar = uni.getStorageSync('MyusrInfo').avatarUrl;
				_this.nickname = uni.getStorageSync('MyusrInfo').nickName;
				_this.nones = false;
			}
			if(uni.getStorageSync('openid')){
				_this.openid = uni.getStorageSync('openid');
			}
			// uni.checkSession({
			// 　　　　success: function(res){
			// 　　　　　　console.log("处于登录态");
			// 　　　　},
			// 　　　　fail: function(res){
			// 　　　　　　console.log("需要重新登录");
			// 　　　　　　wx.login({})　　
			// 　　　　}
			// 　　})
			// }
			// uni.getSetting({
			// 	success(res) {
			// 		console.log("授权：", res);
			// 		if (!res.authSetting['scope.userInfo']) {
			// 			//这里调用授权
			// 			console.log("当前未授权");
			// 			uni.navigateTo({
			// 				url: '../authorization/authorization'
			// 			})
			// 		} else {
			// 			//用户已经授权过了
			// 			console.log("当前已授权");
			// 			if (!uni.getStorageSync('MyuserInfo')) {
			// 				uni.navigateTo({
			// 					url: '../authorization/authorization'
			// 				})
			// 			} else {
			// 				_this.avatar = uni.getStorageSync('MyuserInfo').avatarUrl;
			// 				_this.nickname = uni.getStorageSync('MyuserInfo').nickName;
			// 			}
			// 		}
			// 	}
			// })
		},
		onShow:function(){
			let _this=this;
			if(uni.getStorageSync('openid')){
				_this.openid = uni.getStorageSync('openid');
			}
			_this.getPublishArticle(_this.openid);
		},
		created: function() {},
		methods: {
			goCollect: function() {
				uni.navigateTo({
					url: '../../pages_all/collect/collect?id=2'
				})
			},
			// login: function() {
			// 	uni.navigateTo({
			// 		url: '../user/login'
			// 	})
			// },
			appLoginWx() {
				let _this = this
				uni.login({
					provider: 'weixin',
					success: (res2) => {
						// let appid = 'wx4f8be5dead389437';
						// let appSecret = '24d480d2bf4b6c4d8f724f20cc9edeb3';				
						_this.code = res2.code;
						console.log('code',_this.code)
						uni.request({
							url: 'https://wzq0307.com/api/User/openId',
							data:{
								code:_this.code
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded",
							},
							method: "POST",
							success: (res) => {
								console.log('openid', res.data.data.openid.openid)
								uni.setStorage({
									key: 'openid',
									data: res.data.data.openid.openid
								})
								_this.openid = uni.getStorageSync('openid');
							}
						})
				
					},
					fail: () => {
						uni.showToast({
							title: "微信登录授权失败1",
							icon: "none"
						});
						
					}
				})
				uni.getUserProfile({
					provider: 'weixin',
					desc: '登录',
					success: (info) => { //这里请求接口
						console.log(info);
						_this.userInfo = true;
						_this.avatar = info.userInfo.avatarUrl;
						_this.nickname = info.userInfo.nickName;
						_this.nones = false;
						uni.setStorage({ //缓存用户登陆状态
							key: 'MyusrInfo',
							data: info.userInfo
						})
						const eventChannel = _this.getOpenerEventChannel()
						// console.log("222222",eventChannel,'55555',eventChannel.emit)
						let emit = eventChannel.emit ?? ''
						if (emit) {
							eventChannel.emit('acceptDataFromOpenedPage', {
								data: {
									'MyusrInfo': info.userInfo,
									'openid': uni.getStorageSync('openid')
								}
							})
						}
						//调用接口存在数据库
						//https://wzq0307.com/admin/User/add
						uni.request({
							url: "https://wzq0307.com/api/User/add",
							data: {
								avatar: _this.avatar,
								openid: _this.openid,
								nickname: _this.nickname
							},
							method: "POST",
							success: (res) => {
								// console.log(55555,res)
								// if(res.data.status==0){
								
								
								// }
							}
						})
						// uni.navigateBack({
						// 	fail:function(){
						// 		uni.redirectTo({
						// 			url:'../my/my'
						// 		})
						// 	}
						// })
					},
					fail: () => {
						// console.log(res)
						uni.showToast({
							title: "微信登录授权失败2",
							icon: "none"
						});
						_this.getUserInfos();
					}
				})
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
			},
			getUserInfos: function() {
				let _this = this;
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userInfo'] != undefined && res.authSetting['scope.userInfo'] != true || res.authSetting[
								'scope.userInfo'] == false) {
							wx.showModal({
								title: '请求授权当前用户信息',
								content: '需要获取您的用户信息，请确认授权',
								success: function(res) {
									if (res.cancel) {
										wx.showToast({
											title: '拒绝授权',
											icon: 'none',
											duration: 1000
										})
									} else if (res.confirm) {
										wx.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting["scope.userInfo"] == true) {
													wx.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													console.log('授权后的', dataAu)
													_this.appLoginWx();
												} else {
													wx.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})

												}
											}
										})
									}
								}

							})
						} else if (res.authSetting['scope.userInfo'] == undefined) {
							//调用wx.getLocation的API
							// vm.getLocation();
						} else {
							//调用wx.getLocation的API
							// vm.getLocation();
						}

						setTimeout(function() {
							wx.hideLoading()
						}, 500)
					}
				})
			},
			logout: function() {
				let _this = this;
				uni.showModal({
					title: '警告',
					content: '确定要退出登录？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							uni.showToast({
								title: "退出成功"
							})
							_this.nones = true;
							// uni.removeStorageSync("MyusrInfo")


							uni.clearStorage()
							_this.nickname = '';
							_this.avatar = '';
						}
					}
				})
			},
			getPublishArticle: function(openId) {
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/Article/list',
					method: 'GET',
					data: {
						open_id: openId
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log("发表文章数量", res.data.data.articleList.length)
							_this.publishArticleNum = res.data.data.articleList.length;
							let likeSum = 0;
							res.data.data.articleList.forEach(element => {
								likeSum += element.like_length;
							})
							_this.pulishArticleLikeSum = likeSum;
							console.log("发表文章的总获赞数", likeSum)
			
						} else {
							alert("获取文章列表失败，具体信息：" + res.data.message);
						}
			
						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
			
				})
			},
			clear: function() {
				uni.showToast({
					title: '清理缓存成功',
					icon: 'none',
				})
				// this.logout()
				uni.clearStorage()
			}

		},
	}
</script>

<style>
	@import "/style/animated.wxss";
	@import "../../style/main.wxss";
	/* @import '/style/icon.wxss';
	@import '/style/icon2.wxss'; */

	.user {
		background: #f8f8f8;


		width: 100%;
		animation: fadeIn .9s;


	}

	.header {
		margin: 20rpx 0 20rpx 20rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;



	}

	.cu-dialog {
		width: 500rpx;
	}

	.actic button {
		width: 47%;
	}

	.actic {
		display: flex;
		padding: 0px 10px;
		width: 100%;
		justify-content: space-between;
	}

	.header image {
		width: 100rpx;
		height: 200rpx;
	}

	.content2 {

		margin-bottom: 20rpx;
	}

	/* .cu-modal{
	  animation:fadeIn 1s ;
	} */
	.logo {
		width: 50px;
		height: 50px;
		margin: 0 auto;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 10px;
		border: 2px solid #fff
	}

	.bg_kl3 {
		border: 1px solid#f2bf80;
		background-color: #fff !important;
		color: #f2bf80;

	}

	.b_kl4 {
		background-color: #f2bf80 !important;
		color: #fff;

	}

	.content2 text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.tj-sction .tj-item,
	.order-section .order-item {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	button {
		font-weight: 400;
	}

	.tj-sction {
		padding-top: 10px;
		border-radius: 6px 6px 0px 0px;
		overflow: hidden;
		/* background-color:rgba(255,255,255,0.6); */

	}

	.tj-sction,
	.order-section {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		padding: 0px;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-content: center;
		align-content: center;


	}

	.user-section {
		padding: 20rpx 30rpx;
		padding-bottom: 0px;

		position: relative;
		background-size: cover;
		background-position: center center;
		background-image: url('https://7472-treeworld-2g5yvz9s899bf4a6-1259429368.tcb.qcloud.la/user_bg1.png?sign=9a77fccae10229823136ec0595cb5678&t=1619763473');
		background-color: #122640
	}

	.user-section .bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 200px;

	}

	.cu-list {
		padding: 0px 30rpx;
	}

	.text-tree {
		font-size: 18px !important;
	}

	.cu-item {
		padding-left: 0px !important;
	}

	.user-info-box {
		height: 130rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.user-info-box .portrait {
		width: 120rpx;
		height: 120rpx;

		border-radius: 50%;
	}

	.user-info-box .username {
		font-size: 38rpx;
		color: #fff;
		margin-left: 30rpx;
	}

	.user-info-box .username2 {
		font-size: 24rpx;
		color: #d69c63;
		margin-left: 30rpx;
	}


	.vip-card-box {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #f7d680;
		height: 240rpx;
		background: linear-gradient(to top left, #000000, #434343);

		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20rpx 24rpx;
	}

	.vip-card-box .card-bg {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 380rpx;
		height: 260rpx;
	}

	.vip-card-box .b-btn {
		position: absolute;
		right: 20rpx;
		top: 16rpx;
		width: 140rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 22rpx;
		color: #36343c;
		border-radius: 20px;
		background: -webkit-linear-gradient(left, #f9e6af, #ffd465);
		background: linear-gradient(left, #f9e6af, #ffd465);
		z-index: 1;
	}

	.vip-card-box .tit {
		font-size: 30rpx;
		color: #fff;
		margin-bottom: 28rpx;
	}

	.vip-card-box .tit .yticon {
		color: #122640;
		margin-right: 16rpx;
	}

	.vip-card-box .e-b {
		font-size: 24rpx;
		color: #d8cba9;
		margin-top: 10rpx;
	}

	button {
		padding: 0px;
		margin: 0px;
	}

	.min_height {
		min-height: 50rpx;
	}

	.bg_fe {
		background-color: #ffc168;
		color: #fff
	}

	.bg_te {
		background-color: #56a0d3;
		color: #fff
	}

	.cover-container {
		margin-top: -164rpx;
		padding-top: 23px;
		position: relative;
		background-color: #fff;
		height: calc(100vh - 680rpx);

		padding-bottom: 20rpx;
	}

	.user_jx {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
	}

	.cover-container .arc {
		position: absolute;
		left: 0;
		top: -34rpx;
		width: 100%;
		height: 36rpx;
	}

	.tj-sction .tj-item {
		flex-direction: column;
		font-size: 28rpx;
		margin: 20rpx 0px;
		width: 25%;

	}

	/* button{
	  width: 100%!important;
	font-weight: 400!important;
	} */
	.tj-sction .num {
		font-size: 50rpx;
		color: #fff;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.tj-sction .num2 {
		font-size: 26rpx;
		color: #fff;

		margin-bottom: 8rpx;
	}


	.vip-card-box {
		display: flex;
		flex-direction: column;
		margin: 0px 10px;
		color: #f7d680;
		height: 240rpx;
		background-size: 100% 100%;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;

		padding: 20rpx 24rpx;
	}

	.bg_ware {
		position: absolute;
		left: 0;
		bottom: -2rpx;
		width: 100%;
		mix-blend-mode: screen;
		height: 86rpx;

	}

	.user_form_s {
		display: flex;
		justify-content: space-between;
		width: 70%;
		margin: 0 auto;
		color: #fff;
		text-align: center;
	}

	.bd_user {
		position: fixed;
		right: 0px;
		padding: 3px 10px;
		background: linear-gradient(to top left, #f7ce9e, #d69c63);
		color: #fff;
		font-size: 12px;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
	}





	.dlo {
		color: #fff;
		background: linear-gradient(to top left, #f7ce9e, #d69c63);
		animation: 1s fadeInLeft;
		padding: 0px;
		height: auto;
		padding: 2px 20px;
		font-size: 13px !important;
		margin-left: 30px;
		border-radius: 4px;
		width: 100px;
	}

	.buto {
		font-size: 12px;
		color: #fff;
		width: 100% !important;
		background: transparent;
		text-align: center !important;
		padding: 0px;
	}

	.height {
		height: 100%;
	}

	.nav-li {
		padding: 30rpx;
		width: calc(50% - 20rpx);
		background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
		border-radius: 6px;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10rpx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 28rpx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 36rpx;
		margin-right: 4rpx;
	}

	.nav-name {
		font-size: 24rpx;
		text-transform: Capitalize;
		margin-top: 10rpx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36rpx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 52rpx;
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}
</style>
